<template>
  <div class="register">
    <div class="form">
      <h3 class="title">用户注册</h3>
      <el-form :model="ruleForm"
               status-icon
               :rules="rule"
               ref="ruleForm"
               label-width="80px">
        <el-form-item label="用户名"
                      prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="邮箱"
                      prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码"
                      prop="password">
          <el-input type="password"
                    v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码"
                      prop="password2">
          <el-input type="password"
                    v-model="ruleForm.password2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="ruleForm.identity"
                     placeholder="请选择用户类型">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
                       :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="btn">
          <el-form-item>
            <el-button type="primary"
                       @click="submitForm">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <p class="login">已有账户?前往 <span @click="login">登录</span></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "register",
  data () {
    return {
      ruleForm: {
        username: "",
        email: "",
        password: "",
        password2: "",
        identity: ""
      },
      options: [{
        value: 'user',
        label: '用户'
      }, {
        value: 'admin',
        label: '管理员',
        disabled: true
      }],
      rule: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        password2: [
          { required: true, message: '请输入确认密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitForm () {
      if (this.ruleForm.username == "" || this.ruleForm.email == "" || this.ruleForm.password == "" || this.ruleForm.password2 == "" || this.ruleForm.identity == "") {
        alert("有必填项未填！")
        return
      }

      // 发起注册请求
      this.$axios.post("http://backend.iscatseven.top/api/users/register", {
        name: this.ruleForm.username,
        email: this.ruleForm.email,
        password: this.ruleForm.password,
        identity: this.ruleForm.identity
      }).then(res => {
        this.$message({
          message: '注册成功!正在返回登录页!',
          type: 'success'
        });
        setTimeout(() => {
          this.$router.push("/login");
        }, 2000);
        console.log(res.data);
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
    },
    login () {
      this.$router.push("/login");
    }
  }
}
</script>

<style scoped>
.register {
  width: 95%;
  margin: 0 auto;
}
.title,
.btn,
.login {
  text-align: center;
}
.btn {
  margin-right: 80px;
}
.login span {
  color: #507daf;
  cursor: pointer;
}
.login span:hover {
  color: #0b58b0;
}
</style>